<template>
  <div class="table-container">
    <el-config-provider :locale="zhCn">
      <el-table
        :data="mapStore.basicInfoTableData"
        border
        style="width: 100%"
        :row-style="tableRowStyle"
      >
        <el-table-column prop="licensePlate" label="车牌号码" width="110" />
        <el-table-column prop="licenseType" label="车牌类型" width="150" />
        <el-table-column prop="veccolor" label="车牌颜色" width="90" />
        <el-table-column prop="bracolor" label="车身颜色" width="90" />
        <!-- <el-table-column prop="owner" label="所有人">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.owner"
              placement="top-start"
              >{{
                scope.row.owner
              }}</el-tooltip
            >
          </template>
        </el-table-column> -->
        <el-table-column prop="owner" label="所有人" />
        <el-table-column prop="nuclearTonnage" label="核载吨位" width="90" />
        <el-table-column
          prop="authorizedSeatingCapacity"
          label="核座"
          width="55"
        />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" type="text" :icon="Search" @click="getTrip"
              >行程</el-button
            >
            <el-button size="small" type="text" @click="getCurrentLocation(scope)"
              >实时行程</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="space-15"></div>

      <el-pagination
        size="small"
        background
        layout="total, sizes, prev, pager, next"
        :current-page="mapStore.basicInfoTableCurrentPage"
        :page-size="mapStore.basicInfoTablePageSize"
        :page-sizes="[5, 10]"
        :total="mapStore.basicInfoTableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { Search } from "@element-plus/icons-vue";
import { fetchBasicInfoData, fetchTrajectoryData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const tableRowStyle = (row) => {
  return row.rowIndex % 2 === 0
    ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
    : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
};

const getTrip = (row) => {
  console.log("请求轨迹数据：");
  mapStore.currentCar = row.licensePlate;

  mapStore.trajectoryTodayTableCurrentPage = 1;
  fetchTrajectoryData(
    row.licensePlate,
    mapStore.trajectoryTodayTableCurrentPage,
    mapStore.trajectoryTodayTablePageSize,
    "today"
  );

  mapStore.trajectoryWeekTableCurrentPage = 1;
  fetchTrajectoryData(
    row.licensePlate,
    mapStore.trajectoryWeekTableCurrentPage,
    mapStore.trajectoryWeekTablePageSize,
    "week"
  );

  mapStore.trajectoryMonthTableCurrentPage = 1;
  fetchTrajectoryData(
    row.licensePlate,
    mapStore.trajectoryMonthTableCurrentPage,
    mapStore.trajectoryMonthTablePageSize,
    "month"
  );
};

const getCurrentLocation = (scope) => {
  console.log("获取最新行程：");
  console.log(scope.row);
  window.open(`/location/${scope.row.licensePlate}/${scope.row.endLon}/${scope.row.endLat}`, "_blank");
};

// 分页大小改变时的回调
const handleSizeChange = (val) => {
  mapStore.basicInfoTablePageSize = val;
  fetchBasicInfoData(
    mapStore.basicInfoTableCurrentPage,
    mapStore.basicInfoTablePageSize
  );
};

// 当前页改变时的回调
const handleCurrentChange = (val) => {
  mapStore.basicInfoTableCurrentPage = val;
  fetchBasicInfoData(
    mapStore.basicInfoTableCurrentPage,
    mapStore.basicInfoTablePageSize
  );
};
</script>

<style scoped>
.el-table {
  /* --el-table-border-color: transparent;
  --el-table-border: none; */
  /* --el-table-border: 1px solid rgba(19, 84, 134, 0.25); */
  --el-table-border-color: rgba(11, 53, 109, 0.25);
  --el-table-border: 1px solid rgba(11, 53, 109, 0.25);
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  /* --el-table-current-row-bg-color: transparent; */
  --el-table-current-row-bg-color: rgba(19, 84, 134, 0.5);
  /* --el-table-header-bg-color: transparent; */
  --el-table-header-bg-color: rgba(19, 84, 134, 0.5);
  /* --el-table-bg-color: transparent; */
  --el-table-bg-color: rgba(19, 84, 134, 0.25);
  /* --el-table-tr-bg-color: transparent; */
  --el-table-tr-bg-color: rgba(19, 84, 134, 0.25);
  --el-table-expanded-cell-bg-color: transparent;
}

.table-container /deep/ .el-table__header thead th {
  font-weight: bold !important;
}
</style>
